<template>
  <div class="home-container">
    <nav-bar></nav-bar>
    <!-- 删除原来的 nav-bar div -->
    <div class="main-content">
      <div class="banner-container">
        <el-carousel height="600px" :interval="5000" arrow="always" class="banner-carousel">
          <el-carousel-item v-for="(item, index) in bannerList" :key="index">
            <div class="banner-content">
              <el-image
                  :src="item.imageUrl"
                  fit="cover"
                  class="banner-image"
              >
                <div slot="placeholder" class="image-slot">
                  <div class="loading-wrapper">
                    <i class="el-icon-loading"></i>
                    <p>精彩图片加载中...</p>
                  </div>
                </div>
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              <div class="banner-overlay"></div>
              <div class="banner-text">
                <h1>{{ item.title }}</h1>
                <p>{{ item.description }}</p>
                <el-button type="primary" class="explore-btn" @click="handleExplore(item)">
                  {{ item.buttonText }}
                </el-button>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="features">
        <div class="feature-item">
          <i class="el-icon-location"></i>
          <h3>热门目的地</h3>
          <p>精选全球热门旅游胜地，带您领略世界各地的独特魅力。</p>
        </div>
        <div class="feature-item">
          <i class="el-icon-suitcase"></i>
          <h3>特色行程</h3>
          <p>定制专属旅行计划，享受独一无二的旅程体验。</p>
        </div>
        <div class="feature-item">
          <i class="el-icon-service"></i>
          <h3>贴心服务</h3>
          <p>专业导游团队，全程无忧的旅行保障。</p>
        </div>
      </div>
    </div>

    <!-- 完善信息弹窗 -->
    <el-dialog
        :visible.sync="completeDialogVisible"
        :close-on-click-modal="false"
        width="520px"
        class="complete-dialog"
        :show-close="false"
    >
      <div class="dialog-content">
        <div class="dialog-header">
          <img src="@/assets/images/welcome.png" class="welcome-img" alt="welcome">
          <h2>完善个人信息</h2>
          <p>帮助我们了解您，为您提供更好的服务</p>
        </div>

        <el-form ref="completeForm" :model="completeForm" :rules="completeRules" label-width="80px">
          <el-form-item prop="nickname" label="昵称">
            <el-input
                v-model="completeForm.nickname"
                placeholder="给自己起个好听的昵称吧"
                prefix-icon="el-icon-user"
            />
          </el-form-item>

          <el-form-item prop="email" label="邮箱">
            <el-input
                v-model="completeForm.email"
                placeholder="用于接收旅行相关信息"
                prefix-icon="el-icon-message"
            />
          </el-form-item>

          <el-form-item prop="gender" label="性别">
            <el-radio-group v-model="completeForm.gender">
              <el-radio :label="1">
                <i class="el-icon-male"></i> 男士
              </el-radio>
              <el-radio :label="2">
                <i class="el-icon-female"></i> 女士
              </el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item prop="birthday" label="生日">
            <el-date-picker
                v-model="completeForm.birthday"
                type="date"
                placeholder="选择您的生日"
                style="width: 100%"
                value-format="yyyy-MM-dd"
            />
          </el-form-item>

          <el-form-item prop="realName" label="真实姓名">
            <el-input
                v-model="completeForm.realName"
                placeholder="用于预订出行服务（选填）"
                prefix-icon="el-icon-user"
            />
          </el-form-item>
        </el-form>

        <div class="dialog-footer">
          <el-button @click="skipComplete" plain>暂不完善</el-button>
          <el-button type="primary" @click="handleComplete" :loading="submitLoading">
            <i class="el-icon-check"></i> 确认提交
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'

export default {
  name: 'Home',
  components: {
    NavBar
  },
  data() {
    return {
      completeDialogVisible: false,
      completeForm: {
        nickname: '',
        email: '',
        gender: '',
        birthday: '',
        realName: ''
      },
      completeRules: {
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        birthday: [
          { required: true, message: '请选择生日', trigger: 'change' }
        ]
      },
      submitLoading: false,
      bannerList: [
        {
          imageUrl: require('@/assets/images/banner/banner1.jpg'),
          title: '探索世界的美好',
          description: '让我们为您打造完美的旅行体验',
          buttonText: '立即预订',
          link: '/booking'
        },
        {
          imageUrl: require('@/assets/images/banner/banner2.jpg'),
          title: '长隆野生动物世界',
          description: '与自然亲密接触，感受野性魅力',
          buttonText: '了解更多',
          link: '/wildlife'
        },
        {
          imageUrl: require('@/assets/images/banner/banner3.jpg'),
          title: '欢乐海洋世界',
          description: '探索海洋奥秘，享受清凉一夏',
          buttonText: '查看详情',
          link: '/ocean'
        },
        {
          imageUrl: require('@/assets/images/banner/banner4.jpg'),
          title: '梦幻主题乐园',
          description: '开启奇妙冒险，创造美好回忆',
          buttonText: '马上出发',
          link: '/theme-park'
        },
        {
          imageUrl: require('@/assets/images/banner/banner5.jpg'),
          title: '精彩演出活动',
          description: '震撼视听盛宴，不容错过',
          buttonText: '查看演出',
          link: '/shows'
        }
      ],
      activeMenu: '/'
    }
  },
  mounted() {
    // 检查是否需要显示完善信息弹窗
    if (this.$route.query.needComplete) {
      this.completeDialogVisible = true
    }
  },
  methods: {
    async handleComplete() {
      try {
        await this.$refs.completeForm.validate()
        this.submitLoading = true
        // 调用完善信息的 API
        const res = await completeInfo(this.userId, this.completeForm)
        if (res.code === 200) {
          this.$message.success('信息完善成功')
          this.completeDialogVisible = false
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.submitLoading = false
      }
    },
    skipComplete() {
      this.completeDialogVisible = false
      this.$message.info('您可以稍后在个人中心完善信息')
    },
    handleExplore(item) {
      this.$router.push(item.link)
    },
    handleLogout() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('user/logout')
        this.$router.push('/login')
        this.$message.success('退出成功')
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  min-height: 100vh;
  background-color: #f5f7fa;

  .nav-bar {
    height: 60px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    .nav-left {
      display: flex;
      align-items: center;

      .logo {
        font-size: 20px;
        font-weight: bold;
        color: #302b63;
        margin-right: 40px;
      }

      .nav-menu {
        ::v-deep .el-menu {
          border: none;
          background: transparent;

          .el-menu-item {
            height: 60px;
            line-height: 60px;
            font-size: 16px;
            color: #606266;

            &:hover, &:focus {
              color: #302b63;
            }

            &.is-active {
              color: #302b63;
              border-bottom: 2px solid #302b63;
            }
          }
        }
      }
    }

    .nav-right {
      .avatar-wrapper {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 5px;
        border-radius: 4px;
        transition: background-color 0.3s;

        &:hover {
          background: #f5f7fa;
        }

        .el-avatar {
          margin-right: 5px;
          background: #302b63;
        }

        .el-icon-caret-bottom {
          font-size: 12px;
          color: #909399;
        }
      }

      ::v-deep .el-dropdown-menu {
        padding: 5px 0;

        .el-dropdown-menu__item {
          padding: 8px 20px;
          font-size: 14px;

          &:hover {
            background-color: #f5f7fa;
            color: #302b63;
          }
        }
      }
    }
  }

  .main-content {
    padding-top: 60px;
  }

  .banner-container {
    margin-bottom: 60px;
    width: 100%;
    overflow: hidden;

    .banner-carousel {
      .banner-content {
        height: 600px;
        position: relative;
        width: 100%;

        .banner-image {
          width: 100%;
          height: 100%;
          display: block;

          ::v-deep .el-image__inner {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
          }

          .image-slot {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background: #f5f7fa;
            color: #909399;

            .loading-wrapper {
              text-align: center;

              i {
                font-size: 30px;
                color: #409EFF;
                margin-bottom: 10px;
                animation: rotating 2s linear infinite;
              }

              p {
                font-size: 14px;
                color: #909399;
              }
            }

            .el-icon-picture-outline {
              font-size: 30px;
            }
          }
        }

        .banner-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.3);
          pointer-events: none;
        }

        .banner-text {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
          color: #fff;
          width: 80%;
          max-width: 800px;
          z-index: 1;

          h1 {
            font-size: 48px;
            font-weight: 600;
            margin-bottom: 20px;
            letter-spacing: 2px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
          }

          p {
            font-size: 24px;
            margin-bottom: 30px;
            opacity: 0.9;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
          }

          .explore-btn {
            padding: 15px 40px;
            font-size: 18px;
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.8);
            transition: all 0.3s ease;

            &:hover {
              background: rgba(255, 255, 255, 0.3);
              transform: translateY(-2px);
            }
          }
        }
      }
    }

    ::v-deep .el-carousel__arrow {
      background: rgba(0, 0, 0, 0.3);
      font-size: 20px;
      width: 44px;
      height: 44px;

      &:hover {
        background: rgba(0, 0, 0, 0.5);
      }
    }

    ::v-deep .el-carousel__indicators {
      .el-carousel__button {
        width: 30px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.7);
      }
    }
  }

  .features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0 40px;

    .feature-item {
      background: #fff;
      padding: 40px 30px;
      border-radius: 16px;
      text-align: center;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgba(48,43,99,0.12);
      }

      i {
        font-size: 48px;
        color: #302b63;
        margin-bottom: 20px;
      }

      h3 {
        font-size: 24px;
        color: #303133;
        margin-bottom: 15px;
      }

      p {
        font-size: 16px;
        color: #606266;
        line-height: 1.6;
      }
    }
  }
}

.complete-dialog {
  ::v-deep .el-dialog {
    border-radius: 16px;
    overflow: hidden;

    .el-dialog__header {
      display: none;
    }

    .el-dialog__body {
      padding: 0;
    }
  }

  .dialog-content {
    .dialog-header {
      background: linear-gradient(135deg, #24243e, #302b63);
      color: #fff;
      padding: 30px;
      text-align: center;

      .welcome-img {
        width: 80px;
        height: 80px;
        margin-bottom: 15px;
      }

      h2 {
        font-size: 24px;
        margin-bottom: 10px;
      }

      p {
        font-size: 14px;
        opacity: 0.9;
      }
    }

    .el-form {
      padding: 30px;

      .el-form-item {
        margin-bottom: 25px;

        &:last-child {
          margin-bottom: 0;
        }

        ::v-deep .el-input__inner {
          height: 42px;
          border-radius: 8px;
          border: 1px solid #dcdfe6;

          &:focus {
            border-color: #302b63;
            box-shadow: 0 0 0 2px rgba(48,43,99,0.1);
          }
        }

        ::v-deep .el-radio {
          margin-right: 30px;

          .el-radio__label {
            i {
              margin-right: 4px;
            }
          }
        }
      }
    }

    .dialog-footer {
      padding: 20px 30px;
      border-top: 1px solid #eee;
      text-align: right;

      .el-button {
        padding: 12px 25px;
        border-radius: 8px;
        font-size: 14px;

        &.el-button--primary {
          background: #302b63;
          border-color: #302b63;

          &:hover {
            background: #24243e;
            border-color: #24243e;
          }

          i {
            margin-right: 4px;
          }
        }
      }
    }
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
